import { useEffect, useRef, useState } from 'react';
import './index.less';
// 1mm = 5px  1mv =  10mm 1mv=50px
/***
 * 1s => 25mm 25mm = 125px
 * 目前麦邦1秒发送 125个点， 相当于1s走125px
 * 1000ms/125 = 8ms 走一个点
 * 为了降低渲染频率，提高性能，设置了40ms一次性走5个点
 *
 * 绘制基准线 按照1cm来算 1cm = 10mm = 50px
 *
 * K1监护仪是每秒250个点， 40ms走10个点
 * 海上120 麦邦监护仪 125个点  
 * 便携式 500个点
 *
 * 增益 0.25 0.5 1  2
 * 对应的高度  25px   50px   100px  200px 扩大2倍
 */
//根据走纸速度选择我们应该要显示的数据，这里先写死
const gainMap: any = {
  '1/4': '12.5',
  '1/2': '25',
  '1': '50',
  '2': '100',
  '4': '100',
};
const EcgCharts = (props: any) => {
  const { itemData } = props;
  const ecgContentId = `ecg-content-${itemData.key}`;
  const ecgEchartId = `ecg-echart-${itemData.key}`;
  const [myCanvasDom, setMyCanvasDom] = useState<any>(null);
  const [width, setWidth] = useState<number>(0);
  const [height, setHeight] = useState<number>(0);
  const pointLogRef = useRef<any[]>([]);
  const beatArrayRef = useRef<any[]>([]);
  const pointXRef = useRef(0);
  const startPointYRef = useRef(0);
  const endPointYRef = useRef(0);
  const padding = itemData?.padding || 0; // 定义上下留白的像素值

  const getChartsWH = () => {
    const contentDom: any = document.getElementById(ecgContentId);
    setWidth(contentDom.clientWidth);
    setHeight(contentDom.clientHeight);
  };

  const initEcharts = () => {
    const myCanvas: any = document.getElementById(ecgEchartId);
    setMyCanvasDom(myCanvas);
  };
  // 数值映射函数，修改映射方向并控制上下边距
  const mapValue = (value: any) => {
    const availableHeight = height - 2 * padding;
    const targetY =
      padding +
      ((value - itemData.minY) / (itemData.maxY - itemData.minY)) *
        availableHeight;
    return Number(height - padding - targetY).toFixed(2);
  };

  const drawMultiplePoints = () => {
    const ecgYAxisDataVal = itemData.ecgYAxisData;
    beatArrayRef.current = [...ecgYAxisDataVal];
    for (let i = 0; i < ecgYAxisDataVal.length; i++) {
      drawLine();
    }
  };
  const drawLine = () => {
    if (beatArrayRef.current.length === 0) {
      return;
    }
    const ctx = myCanvasDom.getContext('2d');
    const targetY = Number(mapValue(beatArrayRef.current[0]));
    // 以画布的中点开始画
    startPointYRef.current = (height - padding * 2) / 2;
    // 如果 x 轴走完了整个画布，就从头开始画
    if (pointXRef.current >= width) {
      pointXRef.current = 0;
      startPointYRef.current = (height - padding * 2) / 2;
      ctx.clearRect(0, 0, 10, height);
      pointLogRef.current = [];
    }
    // 心电图绘制一个标尺
    if (itemData.ecgFlag) {
      const targetHeight = height - padding * 2; // 减去上下留白的高度
      const lineLength = gainMap[itemData?.gain] || 0; 
      const startY = (targetHeight - lineLength) / 2 ; 
      const endY = startY + Number(lineLength);
      ctx.beginPath();
      ctx.strokeStyle = itemData?.gain == 4 ? "#ffffff" : itemData.color;
      ctx.lineWidth = 3;
      ctx.moveTo(0, startY); 
      ctx.lineTo(0, endY); 
      ctx.stroke();
      ctx.closePath();
    }

    // 删除上一次画的，并且添加一个断点背景
    ctx.beginPath();
    ctx.strokeStyle = 'transparent';
    ctx.lineWidth = 1;
    ctx.clearRect(pointXRef.current + 2, 0, 10, height);
    ctx.moveTo(pointXRef.current, 0);
    ctx.lineTo(pointXRef.current, height);
    ctx.stroke();
    ctx.closePath();
    // 画心电波
    ctx.beginPath();
    ctx.strokeStyle = itemData.color;
    ctx.lineWidth = 1;
    ctx.lineCap = 'square';
    ctx.lineJoin = 'round';
    // 如果 x 轴坐标到 0 的位置证明从头开始画，直接定位到开始的坐标，这样就不会从结尾到开始画一条线
    if (pointXRef.current === 0) {
      ctx.moveTo(0, targetY);
    } else {
      // 写一个画的日志是为了让他中间不存在两条线之间好像没有连接上的问题
      if (pointLogRef.current.length === 3) {
        ctx.moveTo(pointLogRef.current[1].x, pointLogRef.current[1].y);
      } else {
        ctx.moveTo(pointXRef.current, endPointYRef.current);
      }
    }
    // 每次走五个像素也就是走一格
    pointXRef.current += itemData.canvasInterval;
    // 拿到数据以后算一下应该在 y 轴的那个位置，如果没有就直接给成中线的位置，真实情况应该是等待接收数据，
    endPointYRef.current = targetY;
    // 重复一下上次画的路径防止中间断点
    if (pointLogRef.current[2] && pointXRef.current !== 0) {
      ctx.lineTo(pointLogRef.current[2].x, pointLogRef.current[2].y);
    }
    // 再写一遍是为了重复上一次画的时候到最后，这样之前定义的就白费了
    if (pointXRef.current === 0) {
      ctx.moveTo(0, targetY);
    }
    ctx.lineTo(pointXRef.current, endPointYRef.current);
    // 把每次画的位置都存起来
    pointLogRef.current.push({ x: pointXRef.current, y: endPointYRef.current });
    if (pointLogRef.current.length > 3) {
      pointLogRef.current.shift();
    }
    // 画一个点，从数据里面删除一个点
    beatArrayRef.current = beatArrayRef.current.slice(1);
    ctx.stroke();
    ctx.closePath();
  };

  useEffect(() => {
    if (itemData?.ecgYAxisData?.length > 0 && myCanvasDom) {
      drawMultiplePoints();
    }
  }, [itemData.ecgYAxisData]);

  useEffect(() => {
    if (height && width) {
      initEcharts();
    }
  }, [width, height]);
  useEffect(() => {
    getChartsWH();
  }, []);

  // 当宽度改变时，重置状态
  useEffect(() => {
    if (myCanvasDom) {
      const ctx = myCanvasDom.getContext('2d');
      ctx.clearRect(0, 0, myCanvasDom.width, myCanvasDom.height); // 清空整个画布
    }
    pointXRef.current = 0;
    pointLogRef.current = [];
    beatArrayRef.current = [];
  }, [width, myCanvasDom]);
  let className = 'ecg-content-multimodule ';
  if (itemData?.notEcg) {
    className += 'not-ecg';
  }
  if (itemData?.gain) {
    className += 'gain' + itemData.gain.replace('/', '_');
  }
  return (
    <div className={className} id={ecgContentId}>
      {/* 导联号：1：I导；2：II导；3：III导  4：aVR导；5：aVL导；6：aVF导；7：V1导；8：V2导；9：V3导；10：V4导；11：V5导；12：V6导； */}
      <div className="ecg-lead-name">
        {itemData.leadNumber === '1' && '导联I'}
        {itemData.leadNumber === '2' && '导联II'}
        {itemData.leadNumber === '3' && '导联III'}
        {itemData.leadNumber === '4' && '导联aVR'}
        {itemData.leadNumber === '5' && '导联aVL'}
        {itemData.leadNumber === '6' && '导联aVF'}
        {itemData.leadNumber === '7' && '导联V1'}
        {itemData.leadNumber === '8' && '导联V2'}
        {itemData.leadNumber === '9' && '导联V3'}
        {itemData.leadNumber === '10' && '导联V4'}
        {itemData.leadNumber === '11' && '导联V5'}
        {itemData.leadNumber === '12' && '导联V6'}
      </div>
      <canvas
        id={ecgEchartId}
        className="ecg-chart-con"
        width={width}
        height={height}
      ></canvas>
    </div>
  );
};

export default EcgCharts;
